<!-- 讲座课程详情 -->
<template>
	<view class="container">
		<view class="c-collapse">
			<u-collapse @change="change" @close="close" @open="open">
				<u-collapse-item v-for="(item,index) in lectureList" :title="item.periods_name">
					<text class="collapse_article" v-for="subItem in item.lecture_list" :key="subItem.id" @click="toLectureArticle">{{subItem.title}}</text>
				</u-collapse-item>
			</u-collapse>
		</view>
		
		<view class="c-rich">
			<mp-html :content="teacherInfo.content" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "lectureDetail",
		data() {
			return {
				// 老师详情
				teacherInfo:{},
				// 课程列表
				lectureList:[]
			}
		},
		onLoad(query){
			this.lectureId = query.id
			this.getTeacherLectureList(query.id)
			this.getLectureTeacherInfo(query.id)
		},
		onShareAppMessage() {
			return {
				title: '教师课堂',
				path: '/pages/pages_lecture/lectureDetail?id'+this.lectureId
			}
		},
		onShareTimeline() {},
		methods: {
			// 获取老师详情
			getLectureTeacherInfo(id){
				this.$http.getLectureTeacherInfo({id}).then(res=>{
					this.teacherInfo = res
				})
			},
			// 获取老师课程
			getTeacherLectureList(id){
				this.$http.getTeacherLectureList({teacher_id:id}).then(res=>{
					this.lectureList = res.data
				})
			},
			// 折叠面板方法
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			},
			// 跳转公众号文章
			toLectureArticle(){
				uni.navigateTo({
					url:"/pages/pages_lecture/lectureArticle"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-collapse{
			.collapse_article{
				padding: 10rpx 15rpx;
				font-size: 28rpx;
			}
		}
		.c-rich{
			margin-top: 40rpx;
			&>image{
				width: 100%;
			}
		}
	}
</style>
